アプリデザイン Sketch と Adobe Illustrator での作業比較
デザイナーのたなかゆきこです。 WEBやITのデザイナーに人気の Sketch ですが、確かに印刷しないのであれば、使わないのはもったいないと言わざるおえない。WEBやモバイルに特化したレイアウトソフトです。しかもサックサック動きます。
なぜ Illustrator でやろうと思ったか
私が Illustrator LOVE だからです。5.5時代よりの愛用品です。しかし、Sketch も触った時に感動しました。 どちらもいいソフトです。しかし、色々な都合上、新しいソフトに踏み込めないという話もよく聞きます。 愛ゆえに、Sketch、 Illustrator の作業比較を作成してみました。 最終的には、アプリケーションは道具なので、
デザイナーが使いやすいものを使う or 案件によって選択するのがベストとおもいます。
Sketch で感動したこと
- 各種デバイスのアートボードアイコンサイズが@1xで準備されている。
- さらにそれを各サイズにエクスポートが簡単。
- 標準テンプレートが用意してある。
- 吸着するのでオブジェクトの配置が楽。
- オブジェクトの位置がわかる。
上記をSketch、 Illustrator で比較
1. 各種デバイスのアートボード・アイコンサイズを@1xで作成
[Sketch の場合]
Insertからアートボードを選択すれば簡単に作れます。
アイコンも同様。
[Illustrator の場合]
新規ファイル作成で、デバイスが選べます！
iPhone 5 を選択すると@2xサイズになっちゃいます。
Illustrator はベクターデータなので、Photoshop や Fireworks と違って@1xでいいです。@1xにしちゃいましょう。
ちなみに Illustrator の数値ボックスの中は「四則演算ができます」。 Illustrator では、【変形】ウィンドウの中で四則演算をし、コマンド + Enter で縦横比率を保って変形してくれます。
Sketch でも四則演算可能でした。縦横比率は、WidthとHeightの間に表示される錠前マークです。
2. さらにそれを各サイズにエクスポートが簡単。
[Sketch の場合]
Exportで簡単に@0.5,@1,@2,@3と選択できます。 アートボード名なので便利です。
[Illustrator の場合]
【ファイル】から【書き出し】を選び、【アートボードごとに作成】にチェックを入れると、{ファイル名}_{アートボード名}.{拡張子}で書き出しができます。
書き出しの【解像度】72だと@1xなので、ここを変更すれば、何倍でも出せます。
3. 標準テンプレートが用意してある。
[Sketch の場合]
既に用意されています。
[Illustrator の場合]
Illustrator にはアプリケーションにテンプレートの用意は存在しません。
自分の iPhone でスクリーンショットを撮影し、 iOS デザインガイドラインを見ながら自分で作成してみるのが勉強になると思います。むしろ初めて iOS アプリデザインをするのであればそちらがオススメ。 探せばネット上にaiファイルのテンプレートデータは存在します。しかし、テンプレートに頼りきりになると自分で理解できない部分も出てくるため、臨機応変な対応は困難になるかもしれません。
4. 吸着するのでオブジェクトの配置が楽。
[Sketch の場合]
オブジェクトが吸着するように配置できるので配置が楽です。
[Illustrator の場合]
スマートガイド、ポイントにスナップが対応してます。
5. オブジェクトの位置がわかる。
[Sketch の場合]
option キーを押した時の感動はすごい。出力できたらもっと感動した。
[Illustrator の場合]
残念ながらその機能は存在しません。
足りない部分はどう補うのか
Illustrator オブジェクトの位置
【変形】ウインドウでx座標、y座標を確認する。Sketch にもあります。 また、複数画面を作成するときに、Illustrator でアートボードの位置をあえてキリのいい単位にします。 前のアートボードでオブジェクトを選択して、【enter キー】を押せば【移動】のショートカットになるので、アートボードの数値だけ入力の入力で、同じ位置にコピーできます。位置はx座標から「アートボードの座標」を引けばいいだけです。 なので、1000とかキリのいい単にしておくと便利です。
Illustrator が楽で Sketch で面倒なこと
日本語はヒラギノで英数字は Helvecia にしたい場合は、Illustrator の合成フォントが楽です。
まとめ
【変形】ウインドウと【移動】を理解し使いこなす、シンボル登録、スウォッチが Illustrator でモバイルデザイン製作する時のポイントです。
最後に、個人的には「案件内容で決める もしくは デザイナーがやりやすいソフトで進める のが良い」とは思いますが、 「次にそのデータを扱うのが自分ではないかもしれない」可能性を考えるが一番大事です。 人に渡しても「わかるデザインデータ製作」を忘れないように製作していきます。
